<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <style>
        div {
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <h5>有序列表</h5>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ol>
    <h5>无序列表</h5>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <h5>未定义样式列表</h5>
    <ul class="list-unstyled">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <h5>内联列表</h5>
    <ul class="list-inline">
        <li class="list-inline-item">Item 1</li>
        <li class="list-inline-item">Item 2</li>
        <li class="list-inline-item">Item 3</li>
        <li class="list-inline-item">Item 4</li>
    </ul>
    <h5>定义列表</h5>
    <dl>
        <dt>Description 1</dt>
        <dd>Item 1</dd>
        <dt>Description 2</dt>
        <dd>Item 2</dd>
    </dl>
    <h5>水平的定义列表</h5>
    <dl class="row">
        <dt class="col-6">Description 1</dt>
        <dd class="col-6">Item 1</dd>
        <dt class="col-6">Description 2</dt>
        <dd class="col-6">Item 2</dd>
    </dl>
</body>

</html>